<template>
    <div>
        <Detail :info="cartoon" :chapterList="chapterList" :goWatcher="goCartoonWatcher" :goDownload="goDownload" />
    </div>
</template>

<script setup lang="ts">
import Detail from '@/components/DetailVue.vue'
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElNotification } from 'element-plus'
import axios from 'axios';

const route = useRoute();
const router = useRouter();
const cid = route.params.cid;

const cartoon = ref(
    {
        "cid": 1,
        "name": "为美好的世界献上祝福！",
        "synopsis": "暂无简介",
        "src": "/images/为美好的世界献上祝福！/",
        "cover": "/images/为美好的世界献上祝福！/cover.png",
        "updateStatus": 1,
        "types": ["搞笑", "异世界", "日漫"],
        "authors": ["渡真仁", "晓枣"]
    }
    // {
    //     "cid": 1,
    //     "name": "为美好世界献上祝福!",
    //     "types": ["日漫", "搞笑", "异世界"],
    //     "cover": "http://127.0.0.1:7001/img/为美好世界献上祝福！.png",
    //     "createTime": "2023-12-15T14:26:14",
    //     "updateTime": "2023-12-15T14:26:14",
    //     "status": 1,
    //     "authors": ["渡真仁"],
    //     "synopsis": "窝囊废死宅与废柴女神穿越到异世界",
    //     "updateStatus": 1,
    // }
)

const chapterList = ref(
    [
        "第1话",
        "第2话",
        "第3话",
        "第4话",
        "第5话",
        "第6话",
        "第7话",
        "第8话",
        "第9话",
        "第10话",
        "第11话",
        "第12话",
        "第13话",
        "第14话",
        "第15话",
        "第16话",
        "第17话",
        "第18话",
        "第19话",
        "第20话",
        "第21话",
        "第22话",
        "第23话",
        "第24话",
        "第25话",
        "第26话",
        "第27话",
        "第28话",
        "第29话",
        "第30话",
        "第31话",
        "第32话",
        "第33话",
        "第34话",
        "第35话",
        "第36话",
        "第37话",
        "第38话",
        "第39话",
        "第40话",
        "第41话",
        "第42话",
        "第43话",
        "第44话",
        "第45话",
        "第46话",
        "第47话",
        "第48话",
        "第49话",
        "第50话",
    ]
)

onMounted(
    () => {
        getCartoon();
        getChapterList();
    }
)

const getCartoon = function () {
    let cids = new Array();
    cids.push(cid);

    axios.get('/api/cartoon/' + cids)
        .then((result) => {
            if (result.data.code === 200) {
                cartoon.value = result.data.data[0];
                console.log(cartoon.value);
            }
        }).catch((err) => {
            ElMessage.error({
                showClose: true,
                message: "获取漫画详内容失败！！！"
            })
            console.log(err);
        });
}

const getChapterList = function () {
    axios.get('/api/cartoon/chapter/' + cid)
        .then((result) => {
            if (result.data.code === 200) {
                chapterList.value = result.data.data;
                console.log("获取漫画章节目录：");
                console.log(chapterList.value);
            }
        }).catch((err) => {
            ElMessage.error({
                showClose: true,
                message: "获取漫画章节目录失败！！！"
            })
            console.log(err);
        });
}

const goCartoonWatcher = function (chapterName) {
    const chapterInfo = {
        cid,
        chapterName,
    }

    const status = window.electronApi.cartoonWatcher(chapterInfo)
    if (status) {
        ElMessage.success({
            message: "工具已启用成功",
            showClose: true,
        })
    } else {
        ElMessage.error({
            message: "工具已启用失败",
            showClose: true,
        })
    }
}

const goDownload = function (chapterName) {
    const downloadURL = cartoon.value.src + chapterName;
    console.log("downloadURL: " + downloadURL);

    window.electronApi.download(downloadURL);
}

</script>
